<template>
	<view class="main-warp">
		<!-- 置顶公告 -->
		<u-notice-bar type="success" :text="noticeText.replaceAll('<br />', '')" bgColor="#ff5a00" color="#fff"
			@click="openNoticeDetail"></u-notice-bar>
		<!-- 公告弹窗 -->
		<u-modal :show="modalShow" title="公告" @confirm="modalClose()">
			<view class="slot-content">
				<rich-text :nodes="noticeText"></rich-text>
			</view>
		</u-modal>
		<!-- 宣传图 -->
		<scroll-view class="imgs">
			<image :lazy-load="true" v-for="(item, index) in 4"
				:src="imgPrefix + '/s_static/index/index-' + (index + 1) +'.jpg'" width="100%" mode="widthFix" class="image">
			</image>
		</scroll-view>
		<!-- 蟹卡列表 -->
		<view class="goods-list" :style="{background: 'url(' + imgPrefix + '/s_static/index/index-bg.png)'}">
			<!-- 标题 -->
			<view class="goods-title">
				<image :lazy-load="true" :src="imgPrefix + '/s_static/index/index-5.png'" width="100%" class="image"
					mode="widthFix">
				</image>
			</view>
			<!-- 列表 -->
			<u-grid :border="false" col="2">
				<u-grid-item v-for="(item, index) in list" :key="item.id">
					<view class="list-item">
						<view class="image-container" @click="toGoodsDetail(item)">
							<image class="image" :src="imgPrefix + '/api/' + item.mainPic" width="100%" mode="widthFix"></image>
						</view>
						<view class="list-info">
							<view class="text" @click="toGoodsDetail(item)">
								<text class="grid-name text">{{item.name}}</text>
								<text class="grid-price text">￥{{item.price}}</text>
							</view>
							<view class="cart-icon">
								<u-icon name="shopping-cart" size="30" color="#ff5a00" @click="wannaBuyThis(item)"></u-icon>
							</view>
						</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>


		<!-- 添加到购物车 -->
		<Add2Cart ref="add2cart" :goods-data="wannaBuyGoods"></Add2Cart>
		<!-- login -->
		<Login></Login>
	</view>
</template>

<script>
	import Login from "@/components/login/index"
	import Add2Cart from "@/components/add2cart/index"
	import {
		getGoodsList
	} from "@/utils/wx_goods"
	import {
		API
	} from '@/config/index.js'
	export default {
		components: {
			Login,
			Add2Cart
		},
		data() {
			return {
				noticeText: "① 乐享型蟹卡已经开放兑换，当前兑换发六月黄2两左右15只。<br /><br />② 2024年，成熟大闸蟹开始兑换日期为今年中秋左右，具体待定。<br /><br />③ 如已兑换，请耐心等待，中秋左右按订单顺序发货。",
				modalShow: false,
				imgPrefix: API,
				list: [],
				popupShow: false,
				wannaBuyGoods: {},
			}
		},
		mounted() {
			uni.$on('alreadyLogin', () => {
				this.getGoodsListData()
			})
		},
		beforeDestroy() {
			uni.$off('alreadyLogin')
		},
		methods: {
			// 获取商品列表
			async getGoodsListData() {
				try {
					let res = await getGoodsList();
					// console.log(res)
					this.list = res.data;
				} catch (e) {
					//TODO handle the exception
				}
			},
			wannaBuyThis(item) {
				this.wannaBuyGoods = item
				this.$nextTick(() => {
					this.$refs.add2cart.popupOpen()
				})
			},
			openNoticeDetail() {
				this.modalShow = true;
				console.log('open')
			},
			modalClose() {
				this.modalShow = false
			},
			toGoodsDetail(data) {
				uni.navigateTo({
					url: "/pages/goods/detail?data=" + encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goods-list {
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	.imgs,
	.goods-title {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 0;

		.image {
			width: 100%;
			display: block;
			vertical-align: top;
		}
	}

	/deep/ .u-grid {
		margin: auto;
		overflow: hidden !important;
		padding-bottom: 20rpx;

		.u-grid-item {
			padding: 10rpx !important;

			.list-item {
				box-sizing: border-box;
				padding: 6rpx;
				width: 100%;
				border-radius: 10rpx;
				background-color: #fff;
				display: flex;
				justify-content: flex-start;
				flex-direction: column;

				.image-container {
					width: 100%;
					padding-top: 100%;
					position: relative;
					overflow: hidden;

					.image {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						/* 图片宽度为 100% */
						height: 100%;
						/* 图片高度为 100% */
						object-fit: cover;
						/* 保持图片原始比例填充容器 */
					}
				}

				.list-info {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					padding: 20rpx 10rpx;

					.text {
						display: block;
					}

					.grid-name {
						color: #333;
						line-height: 1.5;
						padding: 10rpx 0;
					}

					.grid-price {
						font-size: 36rpx;
						font-weight: bold;
						color: #ff5a00;
					}
				}
			}
		}
	}
</style>